import React, { useState } from "react";
import { inject, observer } from 'mobx-react'
import { Modal } from "antd";
import { withRouter } from "react-router-dom";
import imgSrc from '@/assets/images/lb.png';
import './index.scss';

const NoticesModal = (props) => {
  const [currentPage, setCurrentPage] = useState(0);
  const { setNoticeShow } = props;
  const { noticeList } = props.store;
  console.log(props)
  const change = (index) => {
    setCurrentPage(index);
  };
  return (
    <>
      <Modal
        mask={true}
        centered={true}
        width={320}
        className="noticesModal"
        footer={false}
        closable={false}
        title=""
        visible={true}
      >
        <div className="notice">
          <div className="notice-header">
            <img src={imgSrc} alt="" />
            <div
              onClick={() => {
                setNoticeShow(false);
              }}
              className="close"
            ></div>
          </div>
          <div className="notice-body">
            <div className="notice-menu">
              {noticeList.map((item, index) => {
                return (
                  <div
                    onClick={() => {
                      change(index);
                    }}
                    key={index}
                    className={`notice-menu-item ${index === currentPage ? "active" : ""}`}
                  >
                    {item.title.substring(0,6)}
                    {
                      item.title.length>6?'...':''
                    }
                  </div>
                );
              })}
            </div>
            <div className="notice-content">
              <div className="notice-content-item">
                <p className="date">{noticeList[currentPage]?.createdTime}</p>
                <p
                  dangerouslySetInnerHTML={{
                    __html: noticeList[currentPage]?.content.replace(/\n|\r/g,'<br/>'),
                  }}
                ></p>
              </div>
            </div>
          </div>
          <div className="notice-pagination">
            {currentPage + 1} / {noticeList.length}
          </div>
        </div>
      </Modal>
    </>
  );
};

export default withRouter(inject('store')(observer(NoticesModal)));
